<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue基本语法</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <style>
        .d1{
           border:2px solid red;
            width: 200px;
            height: 100px;
        }
        .d2{
            border: 2px solid blue;
            width: 100px;
            height: 50px;
        }
        .isActive{
            color:red;
            text-decoration: underline;
        }
        .active{
            color:darkblue;
        }
    </style>
</head>
<body>
    <div id="d1">
        <!--1. 双向数据绑定-->
        <!--1.1 绑定普通的数据-->
        <input type="text" v-model="message" @keyup.enter="keyUpEnter"><br>
        <input type="text" v-model="message" @keyup.ctrl.alt.c="ctrlaltc"><br>
        {{message}} <br>
        <span v-text="message"></span> <br>
        <span v-html="message"></span> <br>
        <!--1.2 绑定数组-->
        <input type="checkbox"  v-model="language" value="Java">Java <br>
        <input type="checkbox"  v-model="language" value="C++">C++ <br>
        <input type="checkbox"  v-model="language" value="Python">Python <br>
        你喜欢的语言是：
        <br>
        {{language.join(",")}} <br>
        <!--2. 事件绑定-->
        <input type="button" value="+" v-on:click="add">
        {{num}}
        <input type="button" value="-" @click="minus"> <br>

        <!--3. 阻止事件冒泡-->
        <div class="d1" @click="d1click">
            <!--3.1 使用事件修饰符stop可以阻止事件继续向上传播！-->
            d1<div class="d2" @click.stop="d2click" >d2</div>
        </div>
        <!--4. 数组的遍历-->
        <ul>
            <li v-for="st in students" :key="st.sid" v-if="st.age >= 20">
                {{st.sid}} | {{st.sname}} | {{st.sex}} | {{st.age}} | {{st.addr}}
            </li>
        </ul>
        <!--5.
            v-if与v-show:
            区别：前者是彻底没有了此div层，后者是使用display:none进行隐藏
        -->
        <div v-if="show">v-if的显示</div>
        <div v-else>v-if的隐藏</div>
        <div v-show="show">v-show的显示与隐藏</div>
        <!--6. v-bind：单向数据绑定-->
        <!--6.1 样式的值可以由变量isActive决定，此变量可以是普通变量也可以是数组变量-->
        <div v-bind:class="isActive">v-bind用法一</div>
        <!--6.2 是否有active新式取决于变量hasActive是true还是false,v-bind:可以直接去掉v-bind只用:-->
        <div :class="{active:hasActive}">v-bind用法一</div>
        <!--7.计算属性-->
        <!--7.1 没有使用计算属性之前-->
        {{new Date(birthday).getFullYear() + '-' + new Date(birthday).getMonth() + '-' + new Date(birthday).getDate()}}
        <br>
        <!--7.2 使用了计算属性-->
        {{toDate}} <br>

    </div>

</body>
</html>

<script>
    let vs = new Vue({
        el:'#d1',
        data:{
            message:'hello,vue',

            num:1,
            language:[],
            students:[
                {'sid':1001,'sname':'小张','sex':'男','age':20,'addr':'上海','cid':1},
                {'sid':1002,'sname':'小明','sex':'男','age':22,'addr':'广州','cid':2},
                {'sid':1003,'sname':'李四','sex':'女','age':18,'addr':'珠海','cid':3},
            ],
            show:false,
            isActive: ['isActive','error'],
            hasActive:true,
            birthday:1529032123201 // 毫秒值
        },
        created(){
            // this.message = '<h1>hello,created</h1>'
            console.log('this:',this)   // 当前的this是vs这个vue对象
        },
        mounted(){
            console.log("mounted...")
        },
        // 监听变量值的改变
        watch:{
            message(newV,oldV){  //语法为：监听的变量名(新值，旧值){...}
                console.log("newV:",newV,',oldV:',oldV)
            }
        },
        // 计算属性（Vue中提供了计算属性，来替代复杂的表达式）
        computed:{
            toDate(){
                let date = new Date(this.birthday)
                let info = date.getFullYear() + '-' + date.getMonth() + '-' + date.getDate()
                return info
            }
        },
        methods:{
            add(){
                this.num++
            },
            minus(){
                this.num--
                if(this.num <= 0){
                    this.num = 0
                }
            },
            d1click(){
                console.log("d1click...")
            },
            d2click(){
                console.log("d2click...")
            },
            keyUpEnter(){
                console.log("你按下了回车键。")
            },
            ctrlaltc(){
                console.log("你按下了ctrl + alt + c")
            }
        }
    })
</script>